<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>会员回访监控优化</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <script src="http://10.10.10.248/JS/jquery-1.10.2.min.js"></script>
  </head>
  <body>
    <style>
      /* 弹窗 */
      .dialog-container .button {
        display: inline-block;
        padding: 10px 16px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #3e6ab5;
        color: #3e6ab5;
        cursor: pointer;
      }
      .dialog-container .button.button-primary {
        background-color: #3e6ab5;
        color: #fff;
      }
      .dialog-container .button:hover {
        opacity: 0.8;
      }
      .dialog-container {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
      }
      .dialog-container .dialog-content {
        width: 70vw;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
      }
      .dialog-container .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
        background: #3e6ab5;
        color: #fff;
        height: 40px;
      }
      .dialog-container .button.button-close {
        font-size: 18px;
        cursor: pointer;
        color: #fff;
        padding: 0;
      }
      .dialog-container .dialog-body {
        padding: 16px 24px;
        padding-bottom: 30px;
        height: 70vh;
        overflow: auto;
      }
      .dialog-container .dialog-footer {
        padding: 0 24px 30px;
        text-align: right;
      }
      .dialog-container .dialog-footer .button {
        margin-left: 10px;
      }
      .dialog-container .upload-box {
        position: relative;
        border: 1px dashed #3e6ab5;
        border-radius: 4px;
        padding: 20px;
        width: 280px;
        height: 200px;
        text-align: center;
      }
      .dialog-container .image-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .dialog-container .image-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
      }
      .dialog-container .image-item .button-delete {
        width: 20px;
        height: 20px;
        color: #3e6ab5;
        border-radius: 50%;
        padding: 0;
        margin-top: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        transform: rotate(45deg);
      }
      .dialog-container .img-upload {
        width: 280px;
        height: 200px;
        object-fit: cover;
        border-radius: 4px;
      }
      .dialog-container .file-input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }
      .dialog-container .text-1 {
        margin-top: 30px;
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .dialog-container .text-2 {
        margin-top: 10px;
        font-size: 14px;
        color: #333;
      }
      .dialog-container .text-3 {
        margin-top: 30px;
        font-size: 20px;
        color: #3e6ab5;
        font-weight: bold;
      }
      .upload-button {
        color: #3e6ab5;
        cursor: pointer;
        text-decoration: underline;
        margin-top: 20px;
        margin-left: 20px;
      }
    </style>
    <div class="upload-button">上传沟通截图</div>
    <!-- 上传弹框 -->
    <div class="dialog-container" hidden>
      <div class="dialog-content">
        <div class="dialog-header">
          <h5>上传图片</h5>
          <div class="button button-close">×</div>
        </div>
        <div class="dialog-body">
          <div class="image-list">
            <!-- 选择的图片 -->
            <!-- <div class="image-item">
              <img src="./images/1.png" class="img-upload" />
              <div class="button button-delete">+</div>
            </div> -->
            <div class="upload-box">
              <img src="./images/icon.png" class="img-icon" />
              <p class="text-1">将图片拖到此处上传</p>
              <p class="text-2">或者，点击此处上传</p>
              <p class="text-3">点击上传</p>
              <input
                type="file"
                accept="image/*"
                class="file-input"
                id="fileInput"
                data-type="1"
                multiple
              />
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <div class="button button-cancel">取消</div>
          <div class="button button-primary">上传提交</div>
        </div>
      </div>
    </div>

    <script>
      // 获取图片列表
      function getImgList() {
        const imgList = [];
        $(".image-list")
          .find(".img-upload")
          .each(function () {
            imgList.push({
              name: $(this).data("name"),
              src: $(this).attr("src"),
            });
          });
        return imgList;
      }

      // 打开上传弹窗
      $(".upload-button").on("click", function () {
        $(".dialog-container").show();
      });

      // 关闭上传弹窗
      $(".button-close").on("click", function () {
        $(".dialog-container").hide();
      });

      // 选择图片
      $("#fileInput").on("change", function (e) {
        let files = e.target.files;
        let length = files.length;
        if (!files || length === 0) {
          return;
        }
        const imgList = getImgList();
        const repeatImageList = [];
        for (let i = 0; i < length; i++) {
          if (imgList.find((item) => item.name === files[i].name)) {
            repeatImageList.push(files[i].name);
            continue;
          }
          let file = files[i];
          const reader = new FileReader();
          reader.onload = function (e) {
            let img = new Image();
            img.src = e.target.result;
            img.onload = function () {
              let $new = $(`<div class="image-item">
                  <img src="${e.target.result}" data-name="${file.name}" class="img-upload" />
                  <div class="button button-delete">+</div>
                </div>`);
              $new.insertBefore($(".upload-box"));
            };
          };
          reader.readAsDataURL(file);
        }
        if (repeatImageList.length > 0) {
          alert(repeatImageList.join("、") + "已选择，无法重复选择");
        }
      });

      // 删除图片
      $(".image-list").on("click", ".button-delete", function () {
        $(this).parent().remove();
      });

      // 取消
      $(".button-cancel").on("click", function () {
        $(".dialog-container").hide();
      });

      // 上传
      $(".button-primary").on("click", function () {
        const imgList = getImgList();
        console.log("图片列表", imgList);
        if (imgList.length === 0) {
          alert("请选择图片");
          return;
        }
        alert("上传成功");
        $(".dialog-container").hide();
      });
    </script>
  </body>
</html>
